HTML

<section class="callout-list" role='list' aria-label='articles list'>
            
                <h2 class="h2">Optional Section Header</h2>
            
                <div class="callout-list__row" role="listitem">
                    <a href="#" class="callout-list__item">
                        <article class="callout-list__item-1" aria-label="Lorem Ipsum">
                            <div class="callout-list__item-inner">
                                <h3 class="callout-list__item-title">Lorem Ipsum</h3>
                                <img src="/images/temp/callout-list-1.jpg" class="callout-list__item-image" alt="#">
                                <p class="callout-list__item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante lorem. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.</p>
                                <p class="callout-list__item-cta">Learn More</p>
                            </div>
                        </article>
                    </a>
                    <a href="#" class="callout-list__item">
                        <article class="callout-list__item-1" aria-label="Suspendisse Eu Maximus">
                            <div class="callout-list__item-inner">
                                <h3 class="callout-list__item-title">Suspendisse Eu Maximus</h3>
                                <img src="/images/temp/callout-list-2.jpg" class="callout-list__item-image" alt="#">
                                <p class="callout-list__item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.</p>
                                <p class="callout-list__item-cta">Lorem Ipsum Dolor Sit</p>
                            </div>
                        </article>
                    </a>
                    <a href="#" class="callout-list__item">
                        <article class="callout-list__item-1" aria-label="Curabitur Maximus">
                            <div class="callout-list__item-inner">
                                <h3 class="callout-list__item-title">Curabitur Maximus</h3>
                                <img src="/images/temp/callout-list-3.jpg" class="callout-list__item-image" alt="#">
                                <p class="callout-list__item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante lorem. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.</p>
                                <p class="callout-list__item-cta">Learn More</p>
                            </div>
                        </article>
                    </a>
                </div>
            
            </section> <!-- .callout-list -->